import React from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import "./index.css";

import { TabBar } from "antd-mobile";

// 数据不会变的，直接写在最外层
const tabs = [
  {
    key: "/home/page",
    title: "首页",
    icon: <i className="iconfont icon-ind" />,
  },
  {
    key: "/home/findroom",
    title: "找房",
    icon: <i className="iconfont icon-findHouse" />,
  },
  {
    key: "/home/news",
    title: "资讯",
    icon: <i className="iconfont icon-infom" />,
  },
  {
    key: "/home/me",
    title: "我的",
    icon: <i className="iconfont icon-my" />,
  },
];

export default function Home() {
  // 获取路由的路径，然后可以输入路径跳转页面
  const location = useLocation();
  const { pathname } = location;

  // 编程式导航
  const navigate = useNavigate();

  function setRouteActive(value) {
    navigate(value);
  }

  return (
    <div className="app">
      <div className="app-top"></div>

      <div className="app-body">
        {/* 指定路由组件呈现的位置*/}
        <Outlet />
      </div>

      <div className="app-bottom">
        <TabBar safeArea activeKey={pathname} onChange={(value) => setRouteActive(value)}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}
